<template>
  <div class="">
    <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{}">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理 </el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <!-- <el-input placeholder="请输入内容" v-model="form.query" @clear="getData()" clearable>
        <template slot="append" 
          ><i @click="getData()" style="cursor: pointer" class="el-icon-search"></i
        ></template>
      </el-input> -->

      <el-table :data="arr" style="width: 100%" border :header-cell-style="{background:'#EEF1F6',color:'#606266'}">
        <el-table-column type="index" label="#" width="50">
        </el-table-column>
        <el-table-column prop="order_number" label="订单编号" width="180">
        </el-table-column>
        <el-table-column prop="order_price" label="订单价格" width="180">
        </el-table-column>
        <el-table-column prop="order_pay" label="是否付款" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.order_pay == 0 " type="danger">未付款</el-tag>
            <el-tag v-if="scope.row.order_pay == 1 ">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="is_send" label="是否发货" width="180">
        </el-table-column>
         <el-table-column prop="update_time" label="下单时间" width="180">
           <template slot-scope="scope">
             {{scope.row.update_time | dateFormat}}
           </template>
        </el-table-column>
        <el-table-column label="操作">
           <el-button size="mini" type="primary" icon="el-icon-edit" ></el-button>
           <el-button size="mini" type="success" icon="el-icon-location-outline" ></el-button>
        </el-table-column>
      </el-table>

      <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.pagenum"
      :page-sizes="[2, 5, 10, 15]"
      :page-size="form.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
    </el-card>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 这里存放数据
    return {
      input2: "",
      arr: [],
      form: {
        query: "",
        pagenum: 1,
        pagesize: 10,
      },
      total: 0,
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    handleSizeChange(size){
      this.form.pagesize = size;
      this.getData()
    },
    handleCurrentChange(num){
      this.form.pagenum = num;
      this.getData()
    },
    async getData() {
      var { data: res } = await this.$http.get("orders", {
        params: this.form,
      });
      // console.log(res);
      this.arr = res.data.goods;
      this.total = res.data.total;
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getData();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-input {
  width: 300px;
}
</style>
